<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notepad</title>

    <!-- 下拉框插件 -->
    <link rel="stylesheet" href="./assets/plugins/select2/select2.min.css" />

    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />
    <!-- 引入city样式 -->
    <link rel="stylesheet" href="./assets/plugins/city-picker/city-picker.css">

    <!-- 重置样式 -->
    <link rel="stylesheet" href="./assets/css/reset.css" />

    <!-- 公共样式 -->
    <link rel="stylesheet" href="./assets/css/common.css" />

    <!-- 页面独立的 -->
    <link rel="stylesheet" href="./assets/css/UserProfile.css" />
    <!-- 引入mui框架 -->
    <link rel="stylesheet" href="./assets/plugins/mui/css/mui.min.css">
</head>
<body>
    <!-- 用户信息 -->
    <div class="user">
        <div class="avatar wow fadeInUp" onclick="$('#avatar').click()">
            <img src="./assets/images/avatar.png" style="width: 100%;height: 100%;"/>
        </div>
    </div>

    <form method="post" id="profile" class="profile wow fadeInUp" data-wow-delay="200ms">
        <div class="form-group">
            <label for="nickname">姓名</label>
            <input type="text" class="form-control" id="nickname" placeholder="请输入姓名" required />
        </div>

        <div class="form-group">
            <label for="mobile">电话号码</label>
            <input type="mobile" class="form-control" id="mobile" placeholder="请输入邮箱" required />
        </div>

        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password" placeholder="请输入密码"  />
        </div>

        <div class="form-group">
            <label for="gender">性别</label>
            <select class="form-control" id="gender">
                <option>请选择</option>
                <option value="0">保密</option>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>
        </div>
        <!-- 提交头像 -->
        <input type="file" name="avatar" id="avatar" style="display: none;">
        <!-- 地址 -->
        <div class="form-group" style="position: relative;">
            <label for="region">地址</label>
            <input type="text" class="form-control" id="region" placeholder="请选择地址" readonly />
        </div>
        
        <div class="action">
            <button type="submit" class="btn">提交</button>
        </div>
    </form>
</body>
</html>
<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>


<!-- 下拉框插件 -->
<script src="./assets/plugins/select2/select2.min.js"></script>
<!-- 引入city的js文件 -->
<script src="./assets/plugins/city-picker/city-picker.data.min.js"></script>
<script src="./assets/plugins/city-picker/city-picker.min.js"></script>
<!-- 引入mui的js文件 -->
<script src="./assets/plugins/mui/js/mui.min.js"></script>

<!-- 引入请求封装库 -->
<script src="./assets/plugins/axios/axios.min.js"></script>
<script src="./assets/plugins/axios/request.js"></script>
<!-- 引入cookie文件 -->
<script src="./assets/plugins/cookie.js"></script>
<!-- 引入login异常登录文件 -->
<script src="./assets/plugins/login.js"></script>

<script>
    //实例化wow.js
    new WOW().init();

    var business = cookie.get('business')?cookie.get('business'):"{}";
    business = JSON.parse(business);//获取data对象
    $(".avatar img").attr('src',business.avatar);
    $("#nickname").val(business.nickname);
    $("#mobile").val(business.mobile);
    $("#gender").val(business.gender);
    //做保留
    var avatar = region =null;
    //地址初始化
    $('#region').citypicker({
        province:business.province,
        city:business.city,
        district:business.district
    });
    //获取地区的地址码 当城市信息发生改变时出发点的事件
    $("#region").on('cp:updated',function(){
        var citypicker = $(this).data('citypicker');

        //获取变化的地址码 district 获取区级地址吗 province 省级 city 市
        region = citypicker.getCode('district') || citypicker.getCode('city') || citypicker.getCode('province')
    })

    //图片预览效果  
    $('#avatar').change(function(){
        avatar = this.files[0] ? this.files[0]:null
        // 当图片为空时
        if(!avatar){
            return false;
        }
        //利用js文件读取器
        var reader = new FileReader();
        //获取文件的url
        reader.readAsDataURL(avatar);
        //获取读取后的一个事件
        //文件加载事件
        reader.onload = function(e){
            //获取图片的database64 一个数据
            // console.log(e.target.result)
            $(".avatar img").attr('src',e.target.result);
        }
    })



    //表单提交
    $('#profile').submit(async (e)=>{
        //阻止默认行为
        e.preventDefault();
        //获取页面的数据
        //获取手机号的输入值
        var password = $.trim($("#password").val());
        var mobile = $.trim($("#mobile").val())
        var nickname = $.trim($("#nickname").val())
        var gender = $.trim($("#gender").val());
        // 正则判断
        var res = /^1[3-9]\d{9}/;
        if(!nickname){
            mui.alert('昵称不能为空');
            return false;
        }
        if(!res.test(mobile))
        {
            mui.alert('d手机号码格式有问题');
            return false;
        }
        //组装数据
        var data = {
            id:business.id,
            nickname:nickname,
            mobile:mobile,
            gender:gender,
            avatar:avatar,
            region:region
        }
        if(password){
            data.password = password;
        }
        //晚间上传发起请求
        var result = await UPLOAD({
            url:'/business/profile',
            params:data
        })

        // 根据code的值来判断修改成功或失败
        if(result.code){
            //成功修改后替换一下cookie1的值
            cookie.set('business',JSON.stringify(result.data))
            mui.toast(result.msg,{duration:1000})
            setTimeout(()=>{
                //返回上一个页面
                history.go(-1);
            },1000)
            return false
        }else{
            // 修改失败
            mui.toast(result.msg)
            return false;
        }
    })
    $("#gender").select2();
</script>